<template>
	<div>
		<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);height: 60px;line-height: 60px;">
			<div style="float: left; font-size: 30px; width: 60px; text-align: center; border-right: 2px solid #DCDDE0;">
				<i class="el-icon-search"></i>
			</div>
			<font color="#72767B" style="margin-left: 20px;">筛选查询</font>
			
			<div style="float: right; width: auto; margin-right: 20px;">
				<font color="#72767B" style="margin-right: 20px;">状态</font>
				<el-select size='mini' v-model="pagedistributor.distributorStatus" placeholder="请选择" @change="getdistributors()" autocomplete="off">
				<el-option v-for="n in selectby" :label="n.text" :value="n.value"></el-option>
				</el-select>
			</div>
		</div>
		
		<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);height: 60px;line-height: 60px; margin-top: 20px;">
			<div style="float: left; font-size: 30px; width: 60px; text-align: center; border-right: 2px solid #DCDDE0;">
				<i class="el-icon-s-grid"></i>
			</div>
			<font color="#72767B" style="margin-left: 20px;">数据列表</font>
			<div style="float: right; margin-right: 30px;">
				<el-button type="info" @click="deldistributors()">删除</el-button>
			</div>
			<div style="float: right; margin-right: 30px;">
				<el-button type="info"  @click="pd();dialogFormVisible2=true">修改</el-button>
			</div>
			<div style="float: right; margin-right: 30px;">
				<el-button type="info" @click="dialogFormVisible=true">新增</el-button>
			</div>
			<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);margin-top: 4px;">
				<el-table height="600px" :data="distributors" border style="width: 1800" @select="getselect">
					<el-table-column  align="center" type="selection" width="80" ></el-table-column>
					    <el-table-column align="center" label="序号" width="170px">
					        <template slot-scope="scope">
					            {{scope.$index+1}}
					        </template>
					    </el-table-column>
					<el-table-column align="center" prop="distributorName" label="姓名" width="250"></el-table-column>
					<el-table-column align="center" prop="distributorPhone" label="手机号" width="360"></el-table-column>
					<el-table-column align="center" prop="distributorTotalPay" label="累计充值(人民币)"  width="360"></el-table-column>
					<el-table-column align="center" prop="distributorTotalConsumption" label="累计消费(人民币)"  width="360"></el-table-column>
					<el-table-column align="center" prop="distributorStatus" label="状态" :formatter="distributorStatusformat"  width="240"></el-table-column>
					<el-table-column align="" prop="" label="" width="0px">
					<template slot-scope="scope">
					<el-dialog title="新增渠道" :visible.sync="dialogFormVisible">
						<el-form>
						  <el-form-item label="渠道名称" :label-width="300">
						    <el-input type="text" v-model="adddistributor.distributorName"></el-input>
						  </el-form-item>
						  <el-form-item label="手机号" :label-width="300">
						    <el-input type="text" v-model="adddistributor.distributorPhone"></el-input>
						  </el-form-item>
						  <el-form-item label="累计充值"  :label-width="300">
						    <el-input type="text" v-model="adddistributor.distributorTotalPay" placeholder="默认为0"></el-input>
							</el-form-item>
						  <el-form-item label="累计消费"  :label-width="300">
						     <el-input type="text" v-model="adddistributor.distributorTotalConsumption" placeholder="默认为0"></el-input>
						  </el-form-item>
						  <el-form-item label="状态"  :label-width="300">
						     <el-select size='mini' v-model="adddistributor.distributorStatus" placeholder="请选择" autocomplete="off">
						     <el-option v-for="n in selectby" :label="n.text" :value="n.value"></el-option>
							 </el-select>
						  </el-form-item>
						</el-form>
					    <div slot="footer" class="dialog-footer">
					    <el-button @click="dialogFormVisible = false">取 消</el-button>
					    <el-button type="primary"  @click="adddistributors();dialogFormVisible = false">确 定</el-button>
					  </div>
					</el-dialog>
					<el-dialog title="修改渠道" :visible.sync="dialogFormVisible2">
						<el-form>
						  <el-form-item label="渠道名称" :label-width="300">
						    <el-input type="text" v-model="updatedistributors.distributorName"></el-input>
						  </el-form-item>
						  <el-form-item label="手机号" :label-width="300">
						    <el-input type="text" v-model="updatedistributors.distributorPhone"></el-input>
						  </el-form-item>
						  <el-form-item label="累计充值"  :label-width="300">
						    <el-input type="text" v-model="updatedistributors.distributorTotalPay" placeholder="默认为0"></el-input>
							</el-form-item>
						  <el-form-item label="累计消费"  :label-width="300">
						     <el-input type="text" v-model="updatedistributors.distributorTotalConsumption" placeholder="默认为0"></el-input>
						  </el-form-item>
						  <el-form-item label="状态"  :label-width="300">
						     <el-select size='mini' v-model="updatedistributors.distributorStatus" placeholder="请选择" autocomplete="off">
						     <el-option v-for="n in selectby" :label="n.text" :value="n.value"></el-option>
							 </el-select>
						  </el-form-item>
						</el-form>
					    <div slot="footer" class="dialog-footer">
					    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
					    <el-button type="primary"  @click="updatedistributor();dialogFormVisible2 = false">确 定</el-button>
					  </div>
					</el-dialog>
				</template>
				</el-table-column>
				  </el-table>
			</div>
			<div style="text-align: center;">
				<el-pagination :page-count="allPages" @current-change="changPage" 
				:current-page="pagedistributor.indexPage"  background layout="prev, pager, next"></el-pagination>
			</div>		
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Channel',
	
		data() {
			return {
				//新增管理
				dialogFormVisible:false,
				dialogFormVisible2:false,
				input: null,
				dlist:[],
				//用户
				distributors:[],
				//分页查询
				pagedistributor: {
					indexPage: 1,
					pageSize: 4,
					distributorStatus:null
				},
				allPages: null,
				total: null,
				//分页查询下拉菜单
				selectby: [
					{value:'0',text:'正常'},
					{value:'1',text:'停用'},
				],
				
				//添加
				adddistributor:{
					distributorName:null,
					distributorPhone:null,
					distributorTotalPay:null,
					distributorTotalConsumption:null,
					distributorStatus:null
					
				},
				
				//修改
				updatedistributors:{
					distributorId:null,
					distributorName:null,
					distributorPhone:null,
					distributorTotalPay:null,
					distributorTotalConsumption:null,
					distributorStatus:null
					
				}
			}
		},
		methods: {
			changPage(index) {
				this.pagedistributor.indexPage=index;
				this.getdistributors();
				
			},
			//获取经销商数据
			getdistributors(){
				this.$http.post("/distributor/getdistributor",this.pagedistributor)
					.then((resp) => {
						this.distributors= resp.data.data.distributors;
						this.allPages=resp.data.data.allPages;
						this.total=resp.data.data.total;
						this.pagedistributorindexPage=resp.data.data.indexPage;
					}).catch(function(error) {
						console.log(error);
					})
			},
			//新增渠道商
			adddistributors(){
				this.$http.post("/distributor/adddistributor",this.adddistributor)
					.then((resp) => {
						if(resp.data.code==200){
							this.$message({
								message: resp.data.message,
								type: 'success'
							});
							this.getdistributors();
							this.adddistributor.distributorName=null;
							this.adddistributor.distributorPhone=null;
							this.adddistributor.distributorStatus=null;
							this.adddistributor.distributorTotalConsumption=null;
							this.adddistributor.distributorTotalPay=null;
						}else{
							this.$message({
								message: resp.data.message,
								type: 'warning'
							});
						}
					}).catch(function(error) {
						console.log(error);
					})
			},
			//修改渠道商
			updatedistributor(){
					this.updatedistributors.distributorId=this.dlist[0];
					this.$http.post("/distributor/updatedistributors",this.updatedistributors)
						.then((resp) => {
							if(resp.data.code==200){
								this.$message({
									message: resp.data.message,
									type: 'success'
								});
								this.getdistributors();
								this.updatedistributors.distributorId=null;
								this.updatedistributors.distributorName=null;
								this.updatedistributors.distributorPhone=null;
								this.updatedistributors.distributorStatus=null;
								this.updatedistributors.distributorTotalConsumption=null;
								this.updatedistributors.distributorTotalPay=null;
							}else{
								this.$message({
									message: resp.data.message,
									type: 'warning'
								});
							}
						}).catch(function(error) {
							console.log(error);
						})
				
			},
			pd(){
				if(this.dlist.length==0){
					this.$message({
						message: '请选择一个修改！',
						type: 'warning'
					});
					dialogFormVisible2=false;
				}
				if(this.dlist.length>1){
					this.$message({
						message: '只能同时修改一个！',
						type: 'warning'
					});
					dialogFormVisible2=false;	
				}
			},
			deldistributors(){
				this.$http.post("/distributor/deldistributors",this.dlist)
					.then((resp) => {
						if(resp.data.code==200){
							this.$message({
								message: resp.data.message,
								type: 'success'
							});
							this.getdistributors();
						}else{
							this.$message({
								message: resp.data.message,
								type: 'warning'
							});
						}
					}).catch(function(error) {
						console.log(error);
					})
			
					
				
			},
			distributorStatusformat(row){
				if(row.distributorStatus=='0'){
					return "正常";
				}else if(row.distributorStatus=='1'){
					return "停用"
				}
			},
			getselect(list,row){
				this.dlist=[];
				for(let n of list){
					this.dlist.push(n.distributorId);
				}
			},
			
			
			
			
		},
		created() {
			this.getdistributors();
			
		}
	}
</script>

<style>
</style>
